<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">昨日访问量</span>
          <span class="layui-badge layui-bg-blue layuiadmin-badge">昨</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                  class="layui-inline layui-icon layui-icon-note"></i><span style="margin-left: 70px;color: #05aaaa;">1352</span>
          </p>
          <p>
            <span style="float:right;color: #05aaaa;">次</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">数据采集频率</span>
          <span class="layui-badge layui-bg-green layuiadmin-badge">数</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                  class="layui-inline layui-icon layui-icon-fire"></i><span style="margin-left: 70px;color: #05aaaa;">123</span>
          </p>
          <p>
            <span style="float:right;color: #05aaaa;">人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">总数据量</span>
          <span class="layui-badge layui-bg-cyan layuiadmin-badge">量</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                  class="layui-inline layui-icon layui-icon-list"></i><span style="margin-left: 70px;color: #05aaaa;">542</span>
          </p>
          <p>
            <span style="float:right;color: #05aaaa;">人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">服务器负载</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">载</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                  style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                  class="layui-inline layui-icon layui-icon-engine"></i><span
                  style="margin-left: 70px;color: #05aaaa;">47</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">人</span>
          </p>
        </div>
      </div>
    </div>

    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12">
          <div class="layui-card">
            <div class="layui-card-header">各项数据统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td>
                    <div id="container" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">通知消息</div>
            <div class="layui-card-body">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                  <col width="200">
                  <col>
                </colgroup>
                <thead>
                <tr>
                  <th>消息标题</th>
                  <th>消息内容</th>
                  <th>发布时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>系统平台</td>
                  <td>平台建设完毕，进行测试</td>
                  <td>2016-11-29</td>
                </tr>
                <tr>
                  <td>系统平台</td>
                  <td>平台建设完毕，进行测试</td>
                  <td>2016-11-29</td>
                </tr>

                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">报警通知</div>
            <div class="layui-card-body">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                  <col width="200">
                  <col>
                </colgroup>
                <thead>
                <tr>
                  <th>报警点位</th>
                  <th>报警值</th>
                  <th>设定值</th>
                  <th>报警时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>位移测量点-01</td>
                  <td>25</td>
                  <td>23</td>
                  <td>2016-11-29</td>
                </tr>
                <tr>
                  <td>位移测量点-01</td>
                  <td>25</td>
                  <td>23</td>
                  <td>2016-11-29</td>
                </tr>

                </tbody>
              </table>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  layui.use(['index', 'table', 'form', 'laydate', 'layedit', 'AjaxCommon', 'AliangLayui'], function () {
    var $ = layui.$;
    var table = layui.table;
    var AjaxCommon = layui.AjaxCommon;
    var AliangLayui = layui.AliangLayui;
    var title = "";
    var findAll_url = 'backAysis/findAllRe.json';
    var cols = [ //表头
      {
        field: 'user.name',
        title: '用户',
        templet: '<div>{{d.user.name==""||d.user.name==null?d.user.phone:d.user.name}}</div>'
      },
      {
        field: 'content',
        title: '内容',

      },
      {
        field: 'evaluate_time',
        templet: "<div>{{layui.util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss')}}</div>",
        title: '发布日期',

      },
      {
        field: 'number',
        title: '点赞数',
        width: 100

      },
      {
        field: 'count',
        title: '评论数',
        width: 100

      },

    ];

    AliangLayui.createTable(
      "#LAY-user-manage",
      "listReload",
      null,
      title,
      findAll_url,
      true,
      [10, 15, 20, 25],
      null,
      cols,
      null
    );



    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['数据量', '数据采集', '数据类别', '数据异常', '数据备份', '告警数量', '数据点位'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }
      ]
    };
    ;
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }

  })
  //饼图（精细养护）

  $.ajax({
    url: "backAysis/findAll.json",
    type: "POST",
    data: {},
    dataType: "json",
    success: function (ret) {
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      option = null;
      option = {
        color: ['#60acfc', '#5bc49f', '#ff7c7c', '#9287e7'],
        title: {
          text: '订单分类占比',
          subtext: '分类占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['待付款','已付款','待服务','进行中','已完成','待评价','已失效','已退款','已提现']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: ret.data.no0, name: '待付款'},
              {value: ret.data.no1, name: '已付款'},
              {value: ret.data.no2, name: '待服务'},
              {value: ret.data.no3, name: '进行中'},
              {value: ret.data.no4, name: '已完成'},
              {value: ret.data.no5, name: '待评价'},
              {value: ret.data.no6, name: '已失效'},
              {value: ret.data.no7, name: '已退款'},
              {value: ret.data.no8, name: '已提现'}


            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
  })


  $.ajax({
    url: "backAysis/isManOrWomen.json",
    type: "POST",
    data: {},
    dataType: "json",
    success: function (ret) {
      var dom = document.getElementById("container1");
      var myChart = echarts.init(dom);
      var app = {};
      option = null;
      option = {
        color: ['#feb64d', '#9287e7', '#5bc49f', '#60acfc', '#32d3eb'],
        title: {
          text: '男女用户占比',
          subtext: '男女占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['男', '女']
        },
        series: [
          {
            name: '男女用户占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: ret.data.sex1, name: '男'},
              {value: ret.data.sex2, name: '女'}

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      if (option && typeof option === "object") {

        myChart.setOption(option, true);

      }
    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
  })

  //////////////////////////////////////////////////////
  //饼图（日常养护）

  //////////////////////////////////////////////////////
  //柱图（巡查逐月）

  $.ajax({
    url: "backAysis/findYearMonthAdmin.json",
    type: "POST",
    data: {},
    dataType: "json",
    success: function (ret) {

      let arr = JSON.parse('[' + String(ret.data.completeOrder) + ']')

      let arr2 = JSON.parse('[' + String(ret.data.unCompleteOrder) + ']')

      var dom = document.getElementById("container2");
      var myChart = echarts.init(dom);
      var app = {};
      option = null;
      option = {
        title: {
          text: '订单交易逐月统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'vertical',
          data: ['成交', '未成交'],
          left: 'right'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '成交',
            type: 'bar',
            color: '#60ACFC',
            data: arr,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '未成交',
            type: 'bar',
            color: '#AFE39B',
            data: arr2,
            markPoint: {
              data: [
                {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          top: '25%',
          containLabel: true
        }
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
  })


</script>
</body>
</html>